<template>
    <view class="task-page">
		<view class="task-title">
			<view class="task-title-fixed">
				<view class="left">
					<view class="item" v-for="(tab, inx) in titleTabs" :key="inx" @click="activeIndex=inx" :class="{'active': activeIndex==inx}">
						<text>{{tab}}</text>
					</view>
				</view>
			</view>
		</view>
		<home v-if="activeIndex==0"
		 	:on-show="showChange"
			:on-reach-bottom="reachBottom"
			@changeActive="changeActive"
		></home>
		<week-task
		v-else-if="activeIndex==1"
			:on-show="showChange"
			:active-tab="activeTab"
			:on-reach-bottom="reachBottom"
			></week-task>
	</view>
</template>

<script>
	import weekTask from  './components/week-task.vue'
	import home from '../recommend/home.vue'
	export default {
		components: {
			weekTask,
			home
		},
		data() {
			return { 
				titleTabs: ['我的校园', '每周任务'],
				showChange: 0, // 执行onShow时，数值改变
				activeIndex: 0, // 0.我的校园 1.每周任务
				activeTab: 0, // 4 代表活动概览
				reachBottom: 0, // 滑到底部时 值改变
			}
		},
		onShow(){
			// #ifdef APP-PLUS
			let isRefresh = getApp().globalData.isRefreshContent
			if(isRefresh){
				this.showChange++
				getApp().globalData.isRefreshContent = false
			}
			// #endif
			// #ifdef H5
			this.showChange++
			// #endif
			
			
		},
		onLoad(){
			if(getApp().globalData.isStudent){
				this.utils.setSTabBar()
			}
		},
		onReachBottom(){
			if(this.activeIndex==0){
				this.reachBottom ++
			}
			
		},
		methods: {
			changeActive(val){
				this.activeIndex = val
				this.activeTab = 4
			},
		}
	}
	

</script>
<style lang="less" scoped>
	.task-page{
		
		min-height: 100vh;
		// #ifdef H5
		min-height: calc(100vh - 50px);
		// #endif
		background-color: #fff;
	}
	.task-title-fixed{
		top: 0;
		position: fixed;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
        height: 220rpx;
		/* #endif */
		/* #ifndef H5 */
		left: 0;
		right: 0;
		/* #endif */
		padding: 0 32rpx 8rpx;
		padding-top: 27rpx;
		// #ifdef APP-PLUS
		padding-top: calc(27rpx + 27px);
        height: 247rpx;
		// #endif
        box-sizing: border-box;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		color: #666;
		font-size: 32rpx;
        background-image: url('~@/static/campus/rec-bg.png');
        background-size: cover;
        background-repeat: no-repeat;
		background-color: #fff;
		z-index: 1;
	}
	.task-title{
		height: 110rpx;
		// #ifdef APP-PLUS
		height: calc(110rpx + 27px);
		// #endif
		.left{
			display: flex;
			align-items: center;
		}
		.item{
            padding: 0 18rpx;
            height: 60rpx;
            line-height: 60rpx;
			margin-right: 36rpx;
            border-radius: 16rpx;
            text-align: center;
            font-size: 32rpx;
            font-weight: bold;
		}
		.active{
			
			color: #FFFFFF;
			font-size: 36rpx;
			position: relative;
            background-color: #262E3F;
			
			text{
				position: relative;
				z-index: 1;
			}
		}
		.rili-icon{
			width: 37rpx;
			height: 40rpx;
		}
	}
	
</style>